<template>
  <div class="showTime">
    <span class="date">{{ date }}</span>
    <br>
    <span class="time">{{ nowTime }}</span>
  </div>
</template>

<script>
let timeInterval = null;
export default {
  //计时
  name: "selfTime",
  data(){
    return {
      nowTime: '',
      date: '',
    }
  },
  mounted() {
    timeInterval = setInterval(this.nowTimes, 1000);
  },
  methods: {
    timeFormate(timeStamp) { //显示当前时间
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
      this.date = year + '.' + month + '.' + date;
      this.nowTime = hh + ':' + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
    },
  },
  beforeDestroy() {
    clearInterval(timeInterval)
  }
}
</script>

<style lang="scss" scoped>
.showTime {
  color: #00FFE6;
  width: 7%;
  text-align: right;
  padding-right: .3rem;
  font-family: Microsoft Yahei,serif;
  font-weight: bolder;
  .time {
    font-size: x-large;
  }
  .date {
    font-size: initial;
  }
}
</style>
